<!doctype html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<title>标题</title>
<meta name='Keywords' content=''>
<meta name='Description' content=''>
<link rel='stylesheet' href='../css/fyz.public.style.css' />
<script type='text/javascript' src='../js/jquery-1.8.3.min.js'></script>
<style type='text/css'>
body{background:#EEEEEE;}
</style>
</head>
<body>
<style type="text/css">
/* InfiniterScroll star */
div.InfiniterScroll{width:1040px; height:200px; margin:50px auto 0px;}
ul.InfiniterScroll li{width:200px; height:200px; margin-right:10px;}
/* InfiniterScroll end */
</style>
<div class="InfiniterScroll">
    <ul class="InfiniterScroll">
        <li class='con' style='background:red;'></li>
        <li class='con' style='background:orange;'></li>
        <li class='con' style='background:yellow;'></li>
        <li class='con' style='background:green;'></li>
        <li class='con' style='background:cyan;'></li>
        <li class='con' style='background:blue;'></li>
        <li class='con' style='background:purple;'></li>
    </ul>
</div>
<script type="text/javascript">
(function($){
    $.fn.extend({
        'InfiniterScroll':function(options){
			var opts = $.extend({},Options_Defaluts,options);
			var $this = $(this);
			var $thisAll = $this.parent().find('*');
			$this.parent('div.InfiniterScroll').css({
				'overflow':'hidden',
				'position':'relative',
			});
			$this.css({
				'width':'1000%',
				'overflow':'hidden',
				'position':'absolute',
				'top':'0px',
				'left':'0px'
			});
			$this.find('li').css({
				'float':'left'
			});
			opts.liWidth = $this.find('li.con').outerWidth(true);
			opts.liSize = $this.find('li.con').size();			
			if(opts.liSize>opts.showSum){
				if(opts.autoPlay){
					function autoPlay(){
						clearInterval(opts.timer);
						opts.timer = setInterval(function(){
							opts.click ++;
							if(opts.click < opts.liWidth){
								opts.left = -opts.click + 'px';$($this).css('left',opts.left);
							}else{
								opts.ulLi = $($this).find('li.con').eq(0);
								$($this).append(opts.ulLi);
								$($this).css('left','0px');
								opts.click = 0;
							};
						},opts.IntervalTime);};
					autoPlay();
					function clearIntervalFun(clearIntervalObj){
						$(clearIntervalObj).bind('mouseover',function(){clearInterval(opts.timer);});
						$(clearIntervalObj).bind('mouseout',function(){autoPlay();});
					};
					clearIntervalFun($this);
					clearIntervalFun($thisAll);
				};
			};
		}
    });
	var Options_Defaluts = {
		click:0,
		liSize:'',
		showSum:5,
		IntervalTime:15,
		autoPlay:true,
		timer:null,
		left:'',
		ulLi:'',
		liWidth:'',
	};
}(window.jQuery));
$("ul.InfiniterScroll").InfiniterScroll({
	autoPlay:true,
	IntervalTime:15,
	showSum:5
});
</script>

</body>
</html>